<marketplace-show-header></marketplace-show-header>

<ion-content class="ion-padding with-widgets">
  <ng-container *ngIf="pkg$ | async as pkg else loading">
    <ng-container *ngIf="pkg | empty; else show">
      <div
        *ngIf="loadVersion$ | async as version"
        class="ion-text-center"
        style="padding-top: 64px"
      >
        <ion-icon
          name="close-circle-outline"
          style="font-size: 48px"
        ></ion-icon>
        <h2>
          {{ pkgId }} @{{ version === '*' ? 'latest' : version }} not found in
          this registry
        </h2>
      </div>
    </ng-container>

    <ng-template #show>
      <marketplace-package [pkg]="pkg"></marketplace-package>
      <marketplace-show-controls
        [url]="url"
        [pkg]="pkg"
        [localPkg]="localPkg$ | async"
      ></marketplace-show-controls>

      <marketplace-show-dependent [pkg]="pkg"></marketplace-show-dependent>

      <ion-item-group>
        <marketplace-about [pkg]="pkg"></marketplace-about>
        <marketplace-dependencies
          *ngIf="!(pkg.manifest.dependencies | empty)"
          [pkg]="pkg"
        ></marketplace-dependencies>
      </ion-item-group>

      <marketplace-additional
        [pkg]="pkg"
        (version)="loadVersion$.next($event)"
      ></marketplace-additional>
    </ng-template>
  </ng-container>

  <ng-template #loading>
    <text-spinner text="Loading Package"></text-spinner>
  </ng-template>
</ion-content>
